<template>
  <div class="defense">
    <div class="left-box">
      <div class="playground-container">
        <AveragePosition :players-position="awayRating.awayplayers"/>
        <div class="legend">
          <img class="attack-arrow" src="../../../../../assets/image/playerGround/rightArrow.png" alt="">
        </div>
      </div>
    </div>
    <div class="right-box">
      <LeftTable :players-rating="awayRating.awayplayersRating.slice(0,7)"/>
      <LeftTable :players-rating="awayRating.awayplayersRating.slice(8,awayRating.awayplayersRating.length)"/>
    </div>
  </div>
</template>

<script>
  import AveragePosition from "../../../../playground/AveragePosition";
  import LeftTable from "./RatingTable";
  export default {
    name: "AwayRating",
    props:{
      awayRating:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    components:{
      AveragePosition,
      LeftTable,

    },
    data(){
      return {
      }
    }
  }
</script>

<style scoped lang="scss">
  .defense {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .left-box {
    /*height: 456px;*/
    /*margin-left: 10px;*/
  }
  .playground-container {
    position: relative;
    /*height: 456px;*/
    /*background-color: red;*/
    margin-top: 18px;
    .playground-top {
      display: flex;
      justify-content: space-between;
      width: 591px;
      color: #656F73;
      line-height: 25px;
      font-size: 16px;
      height: 25px;
      text-align: left;
      /*background-color: #656F73;*/
      .playground-top-item {
        width: 90px;
        height: 25px;
        /*background-color: yellow;*/
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          /*background-color: orange;*/
          width: 25px;
          height: 25px;
        }
      }
      .playground-top-item {
        /*width: 170px;*/
        /*margin-left: 20px;*/
        /*background-color: red;*/
      }
    }
    .playground-right {
      position: absolute;
      top: 30px;
      left: 603px;
      color: #BD1E1E;
      display: flex;
      justify-content: space-between;
      width:17px;
      height: 383px;
      writing-mode: vertical-lr;
      font-size: 18px;
      .little-block {
        height: 3px;
        background-color: #BBBBBB;
        font-size: 25px;
      }
      .rate{
        /*background-color: red;*/
        line-height:16px;
      }
    }
    .legend {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      width: 591px;
      height: 40px;
      .attack-arrow {
        width: 150px;
        /*height: 20px;*/
      }
    }
  }
  .right-box {
    width: 900px;
    height: 413px;
    margin-top: -30px;
    /*margin-right: 70px;*/
    background-color: yellow;
    display: flex;
  }
</style>